<template>
	<view class="page100">
		<u-navbar :safeAreaInsetTop="true" :placeholder="true" title="交易密码" leftIconSize="40rpx"
			@leftClick="handleBack">
		</u-navbar>
		<view class="fz_18 fb pt_12 pl_16">
			{{userInfo.setPayPassword&&!oldTradePwd&&!reset?'输入':'设置'}}交易密码
		</view>
		<view class="fz_12 fc_999 mt_8 pl_16">
			{{tips}}
		</view>
		<!-- <view class="jiaoyiTip">{{tips}}</view> -->
		<view class="pwd-box clearfix">
			<view class="pwd-text fx aic jcc" v-for="(item,index) in 6" :key="index" :data-index="index"
				:class="{active:(activeInput == index)}">{{payPassWord[index]}}</view>
		</view>
		<view class="jiaoyiForgetBox">
			<navigator hover-class='none' url="/pages/person/pages/check_phone?reset=true"
				class='jiaoyiForget colorGreen' v-if="!reset&&userInfo.setPayPassword">
				忘记交易密码？</navigator>
		</view>

		<view class="keyboard-modal layout_h">
			<view class="keyboard keyboard-show">
				<view class="key-box clearfix">
					<view class="num" v-for="item in digitalList" :key="item"
						:class="{'no-num':(item === '' || item === '-1')}" @click="getKeyNumber(item)">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="mt_64 plr_16">
			<button class="custom_btn primary w100 lh_44 br_26 fz_16" :disabled="disabled"
				@click="nextBtnClik">确定</button>
		</view>
	</view>

</template>

<script>
	import api from '@/service/config/api.js'
	export default {
		data() {
			return {
				uid: "",
				payFocus: true,
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'], //键盘
				paymentPwd: '',
				activeInput: 0,
				firstPwd: '', // 第一次密码
				phone: '', // 手机号
				tips: '请设置交易密码，建议勿与银行卡取款密码相同',
				oldTradePwd: '', //旧支付密码
				backCount: 3, //后退页面数量
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				withdrawal: false, // 提现跳过来
				reset: false, // 是否重置
			};
		},
		computed: {
			payPassWord() {
				var payPassWord = this.paymentPwd.split('') || [];
				payPassWord.fill('*');
				return payPassWord;
			},
			disabled() {
				return this.paymentPwd.length < 6
			}
		},
		onLoad(options) {
			this.withdrawal = !!options.withdrawal
			if (options.settingType == 'confirm') {
				this.backCount = 1
			}
			if (this.withdrawal) {
				this.backCount = 1
			}
			if (options.reset) {
				this.reset = true
				return
			}
			if (this.userInfo.setPayPassword) {
				this.tips = '请输入旧的支付密码，以验证身份'
			}
		},
		methods: {
			handleBack() {
				if (this.firstPwd) {
					this.oldTradePwd = ''
					this.paymentPwd = ''
					this.firstPwd = ''
					this.tips = '请设置交易密码，建议勿与银行卡取款密码相同'
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			setTips() {
				if (this.userInfo.setPayPassword) {
					this.tips = '请输入旧的支付密码，以验证身份'
				} else {
					this.tips = '请设置交易密码，建议勿与银行卡取款密码相同'
				}
			},
			// 输入中
			getKeyNumber(val) {
				console.log('valvalval', val)
				let paymentPwdArr = this.paymentPwd.split('');
				if (val === '' || (val != -1 && paymentPwdArr.length === 6)) {
					if (paymentPwdArr.length === 6) {
						return;
					}
					return false;
				} else if (val != -1) { //数字输入
					paymentPwdArr.splice(this.activeInput, 0, val);
					this.activeInput++;
					this.paymentPwd = paymentPwdArr.join('');
					if (paymentPwdArr.length === 6) {
						return;
					}
				} else { //删除
					if (this.activeInput >= 0) {
						this.activeInput !== 0 && this.activeInput--;
						paymentPwdArr.splice(this.activeInput - 1, 1);
						this.paymentPwd = paymentPwdArr.join('');
					}
				}
			},

			// 完成
			nextBtnClik() {
				if (this.userInfo.setPayPassword && !this.oldTradePwd && !this.reset) {
					this.oldTradePwd = this.paymentPwd
					this.paymentPwd = ''
					this.activeInput = 0
					this.tips = '请设置交易密码，建议勿与银行卡取款密码相同'
				} else {
					if (!this.firstPwd) {
						this.firstPwd = this.paymentPwd
						this.paymentPwd = ''
						this.activeInput = 0
						this.tips = '请再次输入交易密码，两次输入密码需一致'
					} else {
						if (this.firstPwd === this.paymentPwd) {
							if (this.oldTradePwd == this.paymentPwd) {
								this.firstPwd = ''
								this.paymentPwd = ''
								this.activeInput = 0
								this.tips = '请设置交易密码，建议勿与银行卡取款密码相同'
								return this.$utils.showToast('新密码不能与旧密码相同');
							}
							this.$utils.loading()
							// 修改密码
							if (this.reset) {
								api.post('/user/api/customerSet/resetPayPassword', {
									payPasswordNew: this.paymentPwd
								}).then(res => {
									let userInfo = this.$storage.getItem('basicUnserInfo')
									userInfo.setPayPassword = true
									this.$storage.setItem('basicUnserInfo', userInfo)
									console.log(1111111)
									return this.$utils.showToast('设置成功', 1500, this.backCount);
								}).catch(() => {
									this.oldTradePwd = ''
									this.paymentPwd = ''
									this.activeInput = 0
									this.firstPwd = ''
									this.setTips()
								})
							} else {
								api.post('/user/api/customerSet/modifyPayPassword', {
									payPasswordOld: this.oldTradePwd,
									payPasswordNew: this.paymentPwd
								}).then(res => {
									let userInfo = this.$storage.getItem('basicUnserInfo')
									userInfo.setPayPassword = true
									console.log(222222)
									this.$store.commit('setUserInfo', userInfo)
									this.$storage.setItem('basicUnserInfo', userInfo)
									return this.$utils.showToast('设置成功', 1500, 3);
								}).catch(() => {
									this.oldTradePwd = ''
									this.paymentPwd = ''
									this.activeInput = 0
									this.firstPwd = ''
									this.setTips()
								})
							}
						} else {
							this.paymentPwd = "";
							this.activeInput = 0
							this.payFocus = true;
							return this.$utils.showToast('两次输入密码不一致，请重新输入')
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss">
	.jiaoyiTip {
		padding: 40rpx 36rpx 0;
		box-sizing: border-box;
		display: block;
	}


	.pwd-box {
		padding: 48rpx 24rpx;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.pwd-text {
		position: relative;
		line-height: 100rpx;
		vertical-align: middle;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		background: #F4F4F4;
		margin: 0 8rpx;
	}

	.jiaoyiForgetBox {
		padding: 0 36rpx;
		box-sizing: border-box;
		display: flex;
		display: -webkit-flex;
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
		-moz-justify-content: flex-end;
		-o-justify-content: flex-end;
	}

	.jiaoyiForget {
		display: inline-block;
	}

	.jiaoyimm_at::before {
		content: "";
		width: 20rpx;
		height: 20rpx;
		border-radius: 100%;
		background: #333333;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 1;
	}

	.input_control {
		position: relative;
		left: -300rpx;
		bottom: 0;
		width: 100rpx;
		height: 100rpx;
	}

	.keyboard-modal {
		position: fixed;
		z-index: 2;
		transition: inherit;
		width: calc(100% + 3px);
		height: 420rpx;
		bottom: 0;
		left: 0;
		transform: translate(0, 0);
		background-color: #fff;
		padding-padding: 0;
		padding-padding: constant(safe-area-inset-top);
		padding-padding: env(safe-area-inset-top);

		.keyboard {
			box-shadow: 0 -1rpx 0 3rpx #eee;
			width: 100%;
			transition: all .2s linear;
			transform: translateY(100%);
		}

		/* 键盘 */
		.key-box {
			box-shadow: 0 0 0 2rpx #eee;
			position: relative;
			overflow: hidden;
			width: 100%;
			margin-top: 20rpx;
		}

		.keyboard-show {
			transform: translateY(0);
		}

		.num {
			transition: all .2s linear;
			float: left;
			background-color: #fff;
			box-shadow: 0 0 0 2rpx #eee;
			width: 33.33333333%;
			cursor: pointer;
			height: 100rpx;
			text-align: center;
			color: #333;
			line-height: 100rpx;
			font-size: 50rpx;
			font-weight: 500;
			position: relative;
			overflow: hidden;

			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				//设置径向渐变
				background-image: radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 20%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5);
				opacity: 0;
				transition: transform .2s ease-in-out, opacity .3s ease-in-out;
			}

			&:active:after {
				//transform: scale(0);
				opacity: .2;
				//设置初始状态
				transition: 0s;
			}
		}

		.num:nth-of-type(3n+1) {
			border-bottom: 0;
			border-left: 0;
		}

		.num:nth-of-type(3n+2) {
			border-bottom: 0;
			border-left: 0;
			border-right: 0;
		}

		.num.no-num {
			background-color: #f2f2f2;
			font-size: 0;
		}

		.num:last-child {
			background: #f2f2f2 url() center center / auto 50rpx no-repeat;
		}
	}

	.next_btn {
		margin: 150rpx 24rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 44rpx;
	}
</style>